<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/lib-master/theme-chalk/index.css">

    <script src="/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="/lib-master/index.js"></script>

    <!-- 引入axios -->
    <script src="/js/axios.min.js"></script>

    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="text-align: right; font-size: 12px">
            <el-button type="primary" round v-on:click="handleAdd()">新增</el-button>
            <span>yanshuai</span>
        </el-header>

        <el-main>
            <!--  :data="studentData" 当前表格绑定的数据tableData  -->
            <el-table
                    :data="empData"
                    style="width: 100%">

                <!--

                 -->
                <el-table-column
                        prop="id"
                        label="编号">
                </el-table-column>
                <el-table-column
                        prop="stuId"
                        label="学号">
                </el-table-column>
                <el-table-column
                        prop="stuName"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="stuPassword"
                        label="密码">
                </el-table-column>
                <!--<el-table-column
                        prop="deptno"
                        label="部门">
                </el-table-column>
                <el-table-column
                        prop="hireday"
                        label="入职时间">
                </el-table-column>-->

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>

    <el-dialog
            title="提交form表单"
            :visible.sync="dialogVisible"
            width="70%"
            :before-close="handleClose">

        <el-form ref="form" :model="form" label-width="80px">

            <el-form-item label="编号">
                <el-input v-model="form.empno" readonly></el-input>
            </el-form-item>

            <el-form-item label="姓名">
                <el-input v-model="form.ename"></el-input>
            </el-form-item>

            <el-form-item label="职位">
                <el-input v-model="form.job"></el-input>
            </el-form-item>

            <el-form-item label="部门">
                <el-input v-model="form.deptno"></el-input>
            </el-form-item>

            <el-form-item label="入职时间">
                <el-input v-model="form.hireday"></el-input>
            </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirm()">确 定</el-button>
          </span>
    </el-dialog>

    <el-dialog
            title="添加员工"
            :visible.sync="dialogVisible2"
            width="70%"
            :before-close="handleClose">
        <el-form ref="form1" :model="form1" label-width="80px">

            <!--            <el-form-item label="编号">
                            <el-input v-model="form.empno" readonly></el-input>
                        </el-form-item>-->

            <el-form-item label="姓名">
                <el-input v-model="form1.ename"></el-input>
            </el-form-item>

            <el-form-item label="职位">
                <el-input v-model="form1.job"></el-input>
            </el-form-item>

            <el-form-item label="部门">
                <el-input v-model="form1.deptno"></el-input>
            </el-form-item>

            <el-form-item label="入职时间">
                <el-date-picker v-model="form1.hireday" type="date" placeholder="选择日期"
                                style="width: 100%;"></el-date-picker>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="addEmp()">确 定</el-button>
          </span>
    </el-dialog>

</div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            empData: [],
            dialogVisible: false,  //  dialogVisible数据决定弹框是否显示
            dialogVisible2: false,
            form: {
                id: 0,
                stuId: '',
                stuName: '',
                stuPassword: 0,
            },
            form1: {
                id: 0,
                stuId: '',
                stuName: '',
                stuPassword: 0,
            }
        },
        methods: {
            handleAdd() {
                this.dialogVisible2 = true;
            },
            addEmp() {
                axios({
                    method: 'get', // 请求方式可以 是 get post
                    url: '/insertEmp',
                    params: this.form1
                }).then(response => {
                    // response.data 就是返回的json
                    console.log(response.data)

                    // 关闭弹框
                    this.dialogVisible2 = false

                    this.$message({
                        type: 'success',
                        message: '更新成功!'
                    });

                    // 刷新当前界面
                    window.location.reload();

                }).catch(function () {

                    alert("服务器错误")
                })
            },
            handleEdit(index, row) {  // 更新按钮回调

                // row 就是包含当前行的数据
                console.log(index, row);

                // 1.弹框  2.初始化表单数据
                this.dialogVisible = true;

                this.form.empno = row.empno;
                this.form.ename = row.ename;
                this.form.job = row.job;
                this.form.deptno = row.deptno;
                this.form.hireday = row.hireday;
            },
            handleDelete(index, row) { // 删除按钮回调
                // row 就是包含当前行的数据
                console.log(index, row);

                // 弹出一个是否删除的弹框
                this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {  // 点击确定按钮的 回调

                    // 发起ajax 异步请求 提交删除的数据
                    axios({
                        method: 'get', // 请求方式可以 是 get post
                        url: '/deleteEmpById',
                        params: {  // 使用params 传递参数
                            empno: row.empno
                        }
                    }).then(response => {
                        // response.data 就是返回的json
                        console.log(response.data.data)

                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });

                        // 刷新当前界面
                        window.location.reload();

                    }).catch(function () {

                        alert("服务器错误")
                    })


                }).catch(() => {  // 点击取消按钮的 回调
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            confirm: function () {

                alert("弹框中即将提交的数据：" + JSON.stringify(this.form))

                // 异步请求提交更新数据
                axios({
                    method: 'get', // 请求方式可以 是 get post
                    url: '/updateEmpById',
                    params: this.form
                }).then(response => {
                    // response.data 就是返回的json
                    console.log(response.data.data)

                    // 关闭弹框
                    this.dialogVisible = false

                    this.$message({
                        type: 'success',
                        message: '更新成功!'
                    });

                    // 刷新当前界面
                    window.location.reload();

                }).catch(function () {

                    alert("服务器错误")
                })
            }
        },
        mounted() {
            axios({
                method: 'post', // 请求方式可以 是 get post
                url: '/getStuByPage',
                params: {  // 使用params 传递参数

                }
            }).then(function (response) {

                // response.data 就是返回的json 数据 转 js List<student> 对象
                console.log(response.data.records)
                // 初始化表格数据
                vm.empData = response.data.records;

            }).catch(function () {

                alert("服务器错误")
            })
        }
    })
</script>
</body>
</html>
